<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" href="https://q1.qlogo.cn/g?b=qq&nk=2267608450&s=640">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>视频在线播放器</title>
</head>
<style>
  /*搜索建议条*/
  #suggest {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 40px;
    border: 1px solid #ccc;
    background: #fff;
    line-height: 25px;
  }

  #suggest ul {
    height: 200px;
    overflow-y: scroll;
    padding-inline-start: 8px;
  }

  #suggest li {
    list-style-type: none;
    border-bottom: 1px solid #ccc;
    text-align: left;
    cursor: pointer;
    padding: 0 8px;
  }

  #suggest li:active {
    background: #F0F0F0;
  }

  #suggest li:hover {
    color: blue;
  }

  #suggest li b {
    float: right;
    width: 44px;
    height: 25px;
    background: url( ///9l0dHRB4nQRlgJ0ODny5Yt+w/CIDZhHUSqgBkKo4nURljZqMHwMBohQQFK/ECvnkT3LgX8kyAzGZATPwWGgTMPSiYCGvyEWgYiGfyEAcjxoKaroWZ5EM52QBUjJLkRExajQUH7Qgg5E4HYxMQLUWpgmYiUxA8AOdLMz+iDKvIAAAAASUVORK5CYII=) no-repeat scroll center center #fff;
    background-size: 11px;
  }

  #suggest .close {
    text-align: right;
    font-size: 14px;
    color: #888;
    padding-right: 12px;
  }
</style>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">视频在线播放器
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
      aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="alert alert-info alert-dismissible" id="notice">
          暂时无信息
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/hls.js/0.14.11-0.alpha.5846/hls.min.js"></script>
        <div width="100%"><video id="player" playsinline controls></video></div>
        <script src="https://cdn.bootcdn.net/ajax/libs/plyr/3.6.2/plyr.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/plyr/3.6.2/plyr.css" />
        <script>
          var source = null;
          const video = document.querySelector('video');
          var hls = null;
          var player = null;
          var html = '';
          var res;
          window.onload = function () {
            res = JSON.parse(localStorage.getItem("his") || "[]");
            res.forEach(function (v) {
              html += '<li class="hisItem">' + v + '</li>';
            });
            document.getElementById('suglist').innerHTML = html;
            if (getQueryVariable("url")) {
              source = decodeURIComponent(getQueryVariable("url"));
              playvideo(source);
              document.getElementById("notice").innerHTML = "当前状态：对方向您分享了一个视频";
            }
            $(".hisItem").click(function () {
              playvideo($(this).text());
            });
          };

          function check() {
            if (source && source.indexOf("ekworp") != -1)
              window.location.href = source;
            source = document.getElementById("video_url").value || "";
            if (source != null && source != "")
              playvideo(source);
            else
              alert("请输入链接");
          }
          function playvideo(source) {
            if (hls)
              hls.detachMedia();
            if (player)
              player.destroy();


            if (res && res.indexOf(source) == -1) {
              res.push(source);
              localStorage.setItem("his", JSON.stringify(res));
              console.log("保存: ", source);
            }

            // For more options see: https://github.com/sampotts/plyr/#options
            // captions.update is required for captions to work with hls.js
            player = new Plyr(video, {
              invertTime: false,
              toggleInvert: true,
              speed: { selected: 1, options: [0.5, 0.75, 1, , 1.10, 1.15, 1.25, 1.5, 1.75, 2] }
            });
            player.ratio = "16:9";
            if (!Hls.isSupported() || source.indexOf("m3u8") == -1) {
              video.src = source;
            } else {
              // For more Hls.js options, see https://github.com/dailymotion/hls.js
              hls = new Hls();
              hls.loadSource(source);
              hls.attachMedia(video);
              window.hls = hls;
            }
            // Expose player so it can be used from the console
            window.player = player;
            if (getQueryVariable("time")) {
              document.getElementById("notice").innerHTML += ("时间：" + decodeURIComponent(getQueryVariable("time")));
              player.on('play', event => {
                let time = decodeURIComponent(getQueryVariable("time"));
                console.log(time);
                setCurEndTimeAndPlay(timeToNum(time.substring(0, 8)), timeToNum(time.substring(11)), "player");
              });
            }
          }
          function ptime(times) {
            if (typeof player != "undefined")
              if (!player.paused)
                player.currentTime += times;
          }
          function pstime(times) {
            if (typeof player != "undefined")
              if (!player.paused) {
                player.speed = times;
              }
          }

          function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
              var pair = vars[i].split("=");
              if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
          }
          function setCurEndTimeAndPlay(startTime, endTime, audioId) {
            let x = document.getElementById(audioId);
            // 设置当前时间 /秒
            x.currentTime = startTime;
            console.log('x.duration: ' + x.duration);
            // 设置暂停时间
            x.addEventListener('timeupdate', function () {
              if (x.currentTime > endTime) {
                x.pause();
              }
            }, false);
            x.addEventListener('loadedmetadata', function () {
              x.play();
            }, false);

            // 播放
            x.play();

          }
          document.getElementById("player").addEventListener('loadedmetadata', function () {
            //时间范围
            laydate.render({
              elem: '#sharePicker'
              , type: 'time'
              , range: true
              , min: '00:00:00'
              , max: document.getElementById("player").duration
            });
          }, false);
          function share() {
            let texts = window.location.origin + window.location.pathname + "?url=" + encodeURIComponent(hls.url) + "&time=" + encodeURIComponent(document.getElementById("sharePicker").value);
            document.getElementById("shareText").value = texts;
            document.getElementById("shareText").select();
            document.execCommand("Copy");
            alert("复制成功");
          }
          function timeToNum(x) {
            let time = 0;
            time += parseInt(x.split(":")[2]);
            time += parseInt(x.split(":")[1]) * 60;
            time += parseInt(x.split(":")[0]) * 3600;
            return time;
          }
          function close_sug() {
            last_kw = '';
            document.getElementById('suggest').style.display = 'none';
          }
          /*获取搜索建议
          采用的神马搜索的服务
          */
          function get_suggest() {
            if (html) {
              document.getElementById('suggest').style.display = 'block';
            }
          }
          function deHis() {
            localStorage.setItem("his", "");
            document.getElementById("notice").innerHTML = "当前状态：清空了历史记录";
          }
        </script>
        <div class="btn-group-sm text-center" role="group">调整播放时间: <button type="button" class="btn btn-primary"
            onclick="ptime(-30)">-30s</button><button type="button" class="btn btn-primary"
            onclick="ptime(-10)">-10s</button><button type="button" class="btn btn-primary"
            onclick="ptime(10)">+10s</button><button type="button" class="btn btn-primary"
            onclick="ptime(30)">+30s</button></div>
        <div class="input-group my-3">
          <i id="clear" onclick="clear_seach()"></i>
          <input class="search form-control nice" id="video_url" name="play" type="text" value=""
            onkeyup="get_suggest()" onfocus="get_suggest()" onpaste="get_suggest()" autocomplete="off"
            placeholder="✎...  客官输入链接吧">
          <div id="suggest" style="display:none">
            <ul id="suglist">
            </ul>
            <div class="close" onclick="close_sug()">
              | 收起
            </div>
          </div>
          <div class="input-group-append">
            <button class="btn btn-primary js-play border-0" type="button" onclick="check()"> <svg width="1em"
                height="1em" viewBox="0 0 16 16" class="bi bi-play" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
              </svg></button>
          </div>
        </div>
        <div id="share">
          时间选择：<input class="layui-input" type="text" id="sharePicker">
          <button type="button" class="btn btn-primary" onclick="share()">
            分享此视频
          </button>
          <input type="text" id="shareText" readonly>
        </div>
      </div>
      <div class="col-md-3">
        <h1>食用说明</h1>
        <p>方便，美观，漂亮<br>填入视频播放链接即可享受视频<br>分享播放说明：填入起始时间和结束时间即可，将链接分享给其他人</p>
        <button type="button" class="btn btn-primary" onclick="deHis()">清空历史记录</button>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl"
    src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
  <script src="https://www.layuicdn.com/layDate/laydate.js"></script>
</body>

</html>